Shiny Walkthrough

Shiny

Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.

Shiny is most often used with the packages “shinydashboard” or “flexdashboard” to build interactive dashboards. We will walk through how to use both shinydashboard and flexdashboard to give you options when using shiny.

Shiny Outline

If you were to open a Shiny app while creating a new file in R, an outline of the an app will be shown using the Old Faithful Geyser Data. This example app shows eruption wait times in a histogram with a side panel to change the number of bins in the histogram. A simple example of what these apps are intended for, user interaction.

## Old Faithful Geyser Example

library(shiny)

# Define UI for application that draws a histogram
ui <- fluidPage(

    # Application title
    titlePanel("Old Faithful Geyser Data"),

    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),

        # Show a plot of the generated distribution
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

# Define server logic required to draw a histogram
server <- function(input, output) {

    output$distPlot <- renderPlot({
        # generate bins based on input$bins from ui.R
        x    <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)

        # draw the histogram with the specified number of bins
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
}

# Run the application 
shinyApp(ui = ui, server = server)

Viewing this example can be useful to see the flow of the user interface and processes. So let’s go through what those terms mean. There are essentially three steps to any Shiny App:

1. Create the User interface – ui
2. Create the processes – server
3. Run the app – shinyApp

The two main parts of the Shiny app are the ui and the server. These objects are the arguments used in the function to run the app, shinyApp(ui, server). We will create an ui and server object for these arguments and name them what they are, ui and server. This will help us from mixing up them up and make our lives easier.

Shiny and Shinydashboard

We will mostly be talking about shinydashboard in this walkthrough. There is no reason to worry as the two packages are essentially the same, but shinydashboard puts your code into an already styled theme in the ui without having to write the code yourself.

Shiny dashboard structure (UI - user interface)

The ui object controls the layout and appearance of the app. This includes formatting, color, text, input panels, main panels, etc. (maybe go into detail here). ui writes your code into html for you. Alternatively, you could use the html functions as well.

For shinydashboard we design parts of the ui and then combine it together in a function called dashboardPage(). To keep things simple, we will go through each of the main parts individually. Then show how they can be combined in this dashboardPage() to make the comeplete user interface.

3 Main parts:

• Header - dashboardHeader()
• Sidebar - dashboardSidebar()
• Body - dashboardBody()

How to build a Sidebar Dashboard

library(shinydashboard)

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Data",
      tabName = "data") #Used for linking in the body
  )
)

If you want more interactivity on your dashboard, shiny has some functions that enables you to do that. You can use a number of different input options using shiny. This allows the user of the website to input information - whether it’s text, a date, or to select options from data that you provide.

Different input functions: * selectInput() # Allows user to select a singular item from a list * textInput() # Allows user to input text * dateInput() # Allows user to input a date * checkboxInput()

How to build user input with shinydashboard

library("shiny")
library("tidyverse")

selectInput(
  inputId = "object", # This is the name you described the object elsewhere in the application
  label = "Favorite Character", # The label you want to show to the user
  choices = c(starwars$name) # List the choices the user has to pick from
 )

Render Functions

Functions that you use in your application’s server side code, assigning them to outputs that appear in your user interface.

• renderPrint()
• renderText()
• renderPlot()
• renderUI() # HTML or a shiny tag object

Example Using Star Wars df

library(shiny)
library(tidyverse)
library(shinydashboard)

header <- dashboardHeader(
  title = "Example Dashboard Header",
  titleWidth = 300
)

sidebar <- dashboardSidebar(
  selectInput(
    inputId = "name",
    label = "Favorite Character",
    choices = c(starwars$name)
  )
)

body <- dashboardBody(
  textOutput("name")
)

After you code the sidebar and body, you can then create the User Interface, or “ui”. The User Interface is built from a header, sidebar, and body. When you modify any of these options, the easiest way is to save it as an object called “header”, “sidebar”, or “body”. The user interface is most often coded into the dashboardPage() function.

ui <- dashboardPage(header = header,
                    sidebar = sidebar,
                    body = body
                    )

server <- function(input, output) {
  output$name <- renderText({
      input$name
    })
}

shinyApp(ui, server)

Shinydashboard Layout

There are two main types of layouts that shiny uses. The first is a “row” based layout, while the other is a “column” based layout. You can use either one, or even a mix of the two. The way to create the layouts is by using the “fluidRow()” function.

These functions are used inside of the dashboardBody() section. Each time “fluidRow()” is called, a new row is created.

Row layout

body <- dashboardBody(
  fluidRow(
# Row 1
  box(
  width = 12, # 12 width spans the entire width of the screen
  title = "Regular Box, Row 1",
  "Text inside of box"
  )),
  fluidRow(
# Row 2
  box(
  width = 12,
  title = "Regular Box, Row 2",
  "Text inside of box 2"
  )
)
)

ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

ui

Column Layout

The next layout option is to build columns. The difference in using columns instead of rows is to use the “column()” function inside of “fluidRow()”.

You can set the width of the column, but when you insert a box or chart, the width needs to be “NULL”.

body <- dashboardBody(
    fluidRow(
    #   Column 1
      column(width = 6,
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Column 1",
        "Text inside of box"
         )      
   ),
  column(width = 6,
    #   Column 2
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Column 2",
        "Text inside of box"
         )      
   )
  )
)
ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

shinyApp(ui, server)

Mix of Column and Row Layout

Note: To create a new row, call another fluidRow() function.

body <- dashboardBody(
    fluidRow(
    #   Row 1
      box(
        width = 12, # The width must be "NULL" when using a column layout
        title = "Regular Box, Row 1",
        "Text inside of box"
         ),
    ),
  fluidRow(
    column(width = 6,
    #   Column 2
      infoBox(
        width = NULL, # The width must be "NULL" when using a column layout
        title = "Regular Box, Row 2, Column 1",
        subtitle = "Text inside of box"
         )
    ),
    column(width = 6,
      infoBox(
        width = NULL,
        title = "Regular Box, Row 2, Column 2",
        subtitle = "Text inside of box"
      )
    )
  )
)

ui <- dashboardPage(header = dashboardHeader(),
                    sidebar = dashboardSidebar(),
                    body = body
                    )

shinyApp(ui, server)